/**
 * 由 WangYu 创建
 * 日期 2017/9/13
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    WebView,
    BackHandler,
} from 'react-native';
import {navigationBarColor} from "../../util/Config";
import CommonNavigationBar from "../../view/CommonNavigationBar";
export default class WebViewPage extends Component {
    constructor(props) {
        super(props);

        let url = this.props.url;
        if (url.search('http://') === -1) {
            url = "http://" + url;
        }
        this.state = {
            url: url,
            webTitle: '',
            canGoBack: false,
        }
    }

    componentWillMount() {
        //添加安卓返回键监听
        BackHandler.addEventListener('hardwareBackPress', this.onBackPress);
    }

    render() {
        return (
            <View style={{flex: 1}}>
                {/*标题栏*/}
                <CommonNavigationBar title={this.state.webTitle}
                                     onLeftButtonPress={this.goBack}/>

                <WebView style={styles.container}
                         ref={'webview'}
                         automaticallyAdjustContentInsets={true}
                         source={{uri: this.state.url}}
                         javaScriptEnabled={true}
                         domStorageEnabled={true}
                         decelerationRate="normal"
                         onNavigationStateChange={this.onNavigationStateChange}
                         onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
                         startInLoadingState={true}
                         scalesPageToFit={true}>
                </WebView>
            </View>
        );
    }

    goBack = () => {
        if (this.state.canGoBack) {
            this.refs.webview.goBack();
        } else {
            this.props.navigation.goBack();
        }
    };

    goForward = () => {
        this.refs.webview.goForward();
    };

    reload = () => {
        this.refs.webview.reload();
    };

    onShouldStartLoadWithRequest = (event) => {
        // Implement any custom loading logic here, don't forget to return!
        return true;
    };

    onNavigationStateChange = (navState) => {
        let title = '';
        if (this.props.navigation.state.params.title) {
            title = this.props.navigation.state.params.title;
        } else {
            //过滤掉网址标题
            title = navState.title.search('http://') === -1 ? navState.title : '';
        }
        this.setState({
            canGoBack: navState.canGoBack,
            // forwardButtonEnabled: navState.canGoForward,
            url: navState.url,
            webTitle: title,
            // loading: navState.loading,
            // scalesPageToFit: true
        });
    };

    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
    }

    /**
     * 处理安卓返回键
     * @returns {boolean}
     */
    onBackPress = () => {
        if (this.state.canGoBack) {
            this.refs.webview.goBack();
        } else {
            this.props.navigation.goBack();
        }
        return true;
    };


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    headerStyle: {
        backgroundColor: navigationBarColor,
        height: 44,
        elevation: 0,
        flexDirection: 'row'
    },
    headerTitleStyle: {
        // backgroundColor: 'green',
        alignSelf: 'center',
        color: 'white',
        flex: 1,
        textAlignVertical: 'center',
        textAlign: 'center',
        fontSize: 18
    },
    defaultLeftIconStyle: {
        width: 60,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        paddingLeft: 10,
        flex: 1,
    },
    defaultRightIconStyle: {
        width: 60,
    }
});
